<template>
    <div class="taik">
        <button @click="getLoveTalk">获取一句土情话</button>
        <ul>
            <li v-for='talk in talkStore.talkList' :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="LoveTail">
    import axios from 'axios'
    import { reactive } from 'vue'
    import { nanoid } from 'nanoid'
    import { useLoveTalkStore } from '../store/loveTalk.ts'

    const talkStore = useLoveTalkStore()
    // let taikList = reactive([
    //     {id:'lsjfglkjh01',title:'张三'},
    //     {id:'lsjfglkjh02',title:'李四'},
    //     {id:'lsjfglkjh03',title:'王五'}
    // ])

    // 方法
    // 土味情话 https://api.uomg.com/api/rand.qinghua?format=json
    async function getLoveTalk(){
        // 发请求 下面这行的写法是:连续解构赋值+重命名
        let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        console.log(title)
        // 把请求回来的字符串,包装成对象
        let obj = {id:nanoid(),title}
        taikList.unshift(obj)
    }
</script>

<style scoped>
    .taik{
        margin-top:20px;
        background-color: orange;
        padding:10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>